<template>
  <div ref="body" class="select_button_module">
    <header @click="toggleSelectMenu">
      <slot name="title" />
    </header>
    <el-select
      :value="value"
      ref="select"
      size="mini"
      :popper-append-to-body="false"
      :style="{
        minWidth: mainWidth + 'px !important'
      }"
      @change="onSelectChange"
    >
      <slot name="options" />
    </el-select>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Emit, Prop, Ref } from 'vue-property-decorator'
@Component
class SelectButton extends Vue {
  @Ref() body!: HTMLElement
  @Ref() select!: { toggleMenu: () => void }
  @Prop({ required: true }) value!: string
  mainWidth: number = 0
  mounted() {
    const { width } = this.body.getBoundingClientRect()
    this.mainWidth = width + 10
  }
  toggleSelectMenu() {
    this.select.toggleMenu()
  }
  @Emit('input')
  onSelectChange<T>(e: T): T {
    return e
  }
}
export default SelectButton
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.select_button_module {
  box-sizing: border-box;
  position: relative;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  header {
    width: 100%;
    span {
      font-size: 12px;
      #flex(row, center, flex-start);
      #color(color, --primary-text-color);
    }
  }
  /deep/.el-select {
    position: absolute;
    left: -5px;
    top: 0;
    width: 100% !important;
    .el-select__tags {
      display: none;
    }
    .el-input {
      visibility: hidden;
    }
    .el-select-dropdown {
      left: 0 !important;
      min-width: 100px;
    }
  }
}
.select_button_module:hover {
  #color(background-color, --primary-hover-text-color);
}
</style>
